<template>
  <a-carousel arrows dots-class="slick-dots slick-thumb">
    <a slot="customPaging" slot-scope="props">
      <preloading-img :picUrl="pictures[props.i].url"></preloading-img>
    </a>
    <div v-for="(item, index) in pictures" :key="index">
      <preloading-img class="pic" :picUrl="item.url"></preloading-img>
    </div>
  </a-carousel>
</template>

<script>
import PreloadingImg from "./preloading-img.vue";

export default {
  name: "Carousel",
  components: {
    PreloadingImg,
  },
  props: {
    pictures: Array,
  },
  created() {
    console.log("carousel created:pictures,", this.pictures);
  },
  data() {
    return {};
  },
  methods: {},
};
</script>

<style scoped>
/* For demo */

.pic {
  max-height: 250px;
  margin: auto;
}

.ant-carousel >>> .slick-dots {
  height: auto;
}
.ant-carousel >>> .slick-slide img {
  border: 5px solid #fff;
  display: block;
  margin: auto;
  max-width: 80%;
}
.ant-carousel >>> .slick-thumb {
  bottom: -45px;
}
.ant-carousel >>> .slick-thumb li {
  width: 60px;
  height: 45px;
}
.ant-carousel >>> .slick-thumb li img {
  width: 100%;
  height: 100%;
  filter: grayscale(100%);
}
.ant-carousel >>> .slick-thumb li.slick-active img {
  filter: grayscale(0%);
}
</style>